<template>
  <div class="page-box">
    <div
      class="box-item"
      v-for="index in length"
      :key="index"
      :ref="'item' + index"
    >
      {{ index }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      length: 10,
    };
  },
  methods: {
    init() {
      //初始化一个实例
      var observer = new IntersectionObserver((changes) => {
        console.log("changes", changes);

        for (const change of changes) {
          const { isIntersecting } = change;
          console.log("视口交互 isIntersecting", isIntersecting);

          // dom 第一次进入视口 执行逻辑  交互第一次后卸载
          if (isIntersecting) {
            console.log("加载逻辑");
            observer.disconnect(); // 取消
          }

          // console.log(change.time);
          // //   当可视状态变化时，状态发送改变的时间戳   对比时间为，实例化的时间，
          // // 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化
          // console.log(change.rootBounds);
          // // 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值
          // console.log(change.boundingClientRect);
          // // 目标元素的矩形区域的信息
          // console.log(change.intersectionRect);
          // // 目标元素与视口（或根元素）的交叉区域的信息
          // console.log(change.intersectionRatio);
          // // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，
          // // 完全可见时为1，完全不可见时小于等于0
          // console.log(change.target);
          // // 被观察的目标元素，是一个 DOM 节点对象
          // // 当前可视区域正在变化的元素
        }
      }, {});
      // 对元素target添加监听，当target元素变化时，就会触发上述的回调
      const target = this.$refs["item3"][0]; // 监听第三个
      console.log("target", target);
      observer.observe(target);
      // // 移除一个监听，移除之后，target元素的可视区域变化，将不再触发前面的回调函数
      // observer.unobserve(target);
      // // 停止所有的监听
      // observer.disconnect();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.page-box {
  overflow: auto;
  height: 100%;
  .box-item {
    height: 400px;
    border: 1px solid #000;
    margin-bottom: 20px;
  }
}
</style>
